import { Video } from "@/type/video";
import { Button, Grid } from "annar";
import React, { useEffect } from "react";
import { usePageEvent } from "remax/macro";
import { GenericEvent, Image, ScrollView } from "remax/wechat";
import { origin } from "../../config/config"
import { ImageCard } from "../image-card";
// import { ImageCard } from "../image-card";
import styles from "./index.css"
import { View } from "remax/wechat";
import { useNativeEffect } from "remax";

export interface Props {
    data: Video[]
    loadingData?: Video[]
    onScrollToLower?: (event: GenericEvent) => void
}

export const LongScrollView = (props: Props) => {
    const [triggered, setTrigger] = React.useState(false)
    const [data, setData] = React.useState(props.data)
    useEffect(()=>{
        setData(props.data)
    }, [props.data])


    useNativeEffect(()=>{
        setData(props.data)
    }, [props.data])

    


    // const onRefresh = () => {
    //     // console.log("onRefresh")
    //     setTimeout(() => {
    //         setTrigger(false)
    //     }, 3000)
    // }

    // const onRestore = () => {
    //     // console.log("onRestore")
    // }

    const renderGridItem = (col: Video, index?: number) => {
        return (
            <View>
                <ImageCard data={col} />
            </View>

            // <img width="30px" src={origin + col.coverPath} />
        )
    }

    let windowWidth = wx.getSystemInfoSync().windowWidth;
    let windowHeight = wx.getSystemInfoSync().windowHeight;
    //rpx与px单位之间的换算 : 750/windowWidth = 屏幕的高度（rpx）/windowHeight
    let maxHeight = 750*windowHeight/windowWidth - 300;



    return (
        <ScrollView
            enhanced={true}
            pagingEnabled={true}
            onScrollToLower={props.onScrollToLower}
            lower-threshold={1000}
            style={{ background: "lightgrey", height: maxHeight}}
            scrollY={true}

        // refresherEnabled={true}
        // refresherThreshold={80}
        // refresherTriggered={triggered}
        // onRefresherRefresh={onRefresh}
        // onRefresherRestore={onRestore}
        >
            <View style={{ display: "flex", flexDirection: "row", flexWrap: "wrap" }}>
                {/*<Grid data={data} columns={2} gutter={[4, 4]}>*/}
                {/*    {renderGridItem}*/}
                {/*</Grid>*/}
                {data.map(item => (
                    <ImageCard data={item} key={item.id}/>
                ))}
            </View>
            <Button look='light' onTap={props.onScrollToLower}>加载更多</Button>




        </ScrollView>
    )
}
